var box=document.querySelectorAll(".box > li");
var er=document.querySelectorAll(".bo > div");

for (var i=0;i <box.length;i++){
    box[i].index = i;
    box[i].onmouseover = function () {
        for (var k=0;k<box.length;k++){

            box[k].classList.remove('box1');
            er[k].classList.remove('obo')
        }
        this.classList.add('box1')
        console.log(this.index);
        er[this.index].classList.add('obo');
        
    }


}